<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .menu {
            width: 250px;
            height: 600px;
            border: 1px solid black;
            padding: 10px 5px;
        }

        .menu .header {
            background: gold;
            font-size: 40px;
            border: 0.5px solid #dddddd;
        }

        .menu .content a {
            display: block;
            font-size: 20px;
            border: 0.5px solid #dddddd;
        }

        .hide {
            display: none;
        }
    </style>
</head>
<body>
<div class="menu">
    <div class="item">
        <div class="header" onclick="show(this);">枣庄</div>
        <div class="content hide">
            <a>薛城区</a>
            <a>市中区</a>
            <a>临沂区</a>
            <a>山亭区</a>
        </div>
    </div>
    <div class="item">
        <div class="header" onclick="show(this);">济宁</div>
        <div class="content hide">
            <a>曲阜市</a>
            <a>济宁市</a>
            <a>邹城</a>
            <a>汶上区</a>
        </div>
    </div>
    <div class="item">
        <div class="header" onclick="show(this);">济宁</div>
        <div class="content hide">
            <a>曲阜市</a>
            <a>济宁市</a>
            <a>邹城</a>
            <a>汶上区</a>
        </div>
    </div>
    <div class="item">
        <div class="header" onclick="show(this);">济宁</div>
        <div class="content hide">
            <a>曲阜市</a>
            <a>济宁市</a>
            <a>邹城</a>
            <a>汶上区</a>
        </div>
    </div>
    <div class="item">
        <div class="header" onclick="show(this);">济宁</div>
        <div class="content hide">
            <a>曲阜市</a>
            <a>济宁市</a>
            <a>邹城</a>
            <a>汶上区</a>
        </div>
    </div>
</div>
</body>
<script src="static/js/jquery-3.7.1.js"></script>
<script>
    function show(self) {
        //self表示该标签(header)    $(self)拿到该标签  $(self).next()拿到需要作用的下一个兄弟标签
        //判断该标签的样式是否有hide样式
        var flag = $(self).next().hasClass('hide');
        $(self).parent().parent().find('.content').addClass('hide')
        if (flag) {
            $(self).next().removeClass('hide');//移除hide样式
        } else {
            $(self).next().addClass('hide');
        }
        console.log($(self).parent().parent().find(".content"))

        //找标签注意参数为.c1  #id 或者标签名
        //改是字符串
    }
</script>
</html>